<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>编辑合同</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1>编辑合同</h1>
            <a th:href="@{/contract/list}" class="btn btn-secondary">返回列表</a>
        </div>
        
        <div class="card">
            <div class="card-body">
                <form id="contractForm" data-validate="true" data-redirect="/contract/list">
                    <input type="hidden" name="id" th:value="${contract.id}">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>合同编号</label>
                                <input type="text" class="form-control" name="contractNo" th:value="${contract.contractNo}" required>
                                <div class="invalid-feedback">请输入合同编号</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>合同名称</label>
                                <input type="text" class="form-control" name="name" th:value="${contract.name}" required>
                                <div class="invalid-feedback">请输入合同名称</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>客户</label>
                                <select class="form-control" name="customerId" required>
                                    <option value="">请选择客户</option>
                                    <!-- 这里应该有一个客户列表的循环 -->
                                    <option th:value="${contract.customerId}" th:text="${contract.customerName}" selected></option>
                                </select>
                                <div class="invalid-feedback">请选择客户</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>销售机会</label>
                                <select class="form-control" name="opportunityId">
                                    <option value="">请选择销售机会</option>
                                    <!-- 这里应该有一个销售机会列表的循环 -->
                                    <option th:if="${contract.opportunityId != null}" th:value="${contract.opportunityId}" th:text="${contract.opportunityName}" selected></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>合同金额</label>
                                <input type="number" step="0.01" class="form-control" name="amount" th:value="${contract.amount}" required>
                                <div class="invalid-feedback">请输入合同金额</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>合同状态</label>
                                <select class="form-control" name="status" required>
                                    <option value="0" th:selected="${contract.status == 0}">草稿</option>
                                    <option value="1" th:selected="${contract.status == 1}">审核中</option>
                                    <option value="2" th:selected="${contract.status == 2}">执行中</option>
                                    <option value="3" th:selected="${contract.status == 3}">完成</option>
                                    <option value="4" th:selected="${contract.status == 4}">取消</option>
                                </select>
                                <div class="invalid-feedback">请选择合同状态</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>签约日期</label>
                                <input type="date" class="form-control" name="signDate" th:value="${contract.signDate}" required>
                                <div class="invalid-feedback">请选择签约日期</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>到期日期</label>
                                <input type="date" class="form-control" name="endDate" th:value="${contract.endDate}" required>
                                <div class="invalid-feedback">请选择到期日期</div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>合同内容</label>
                                <textarea class="form-control" name="content" rows="5" th:text="${contract.content}"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>备注</label>
                                <textarea class="form-control" name="remark" rows="3" th:text="${contract.remark}"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <a th:href="@{/contract/list}" class="btn btn-secondary ml-2">取消</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script layout:fragment="script">
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化表单提交
            submitForm('contractForm', '/crm/api/contract/update', 'POST');
            
            // 加载客户列表
            fetch('/crm/api/customer/list?size=1000')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        const customerSelect = document.querySelector('select[name="customerId"]');
                        if (customerSelect) {
                            const selectedCustomerId = customerSelect.querySelector('option[selected]')?.value;
                            
                            let options = '<option value="">请选择客户</option>';
                            data.data.records.forEach(customer => {
                                const selected = customer.id == selectedCustomerId ? 'selected' : '';
                                options += `<option value="${customer.id}" ${selected}>${customer.name}</option>`;
                            });
                            customerSelect.innerHTML = options;
                        }
                    }
                });
            
            // 客户变更时加载对应的销售机会
            const customerSelect = document.querySelector('select[name="customerId"]');
            const opportunitySelect = document.querySelector('select[name="opportunityId"]');
            
            if (customerSelect && opportunitySelect) {
                customerSelect.addEventListener('change', function() {
                    const customerId = this.value;
                    if (!customerId) {
                        opportunitySelect.innerHTML = '<option value="">请选择销售机会</option>';
                        return;
                    }
                    
                    // 加载该客户的销售机会
                    fetch(`/crm/api/opportunity/customer/${customerId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                const selectedOpportunityId = opportunitySelect.querySelector('option[selected]')?.value;
                                
                                let options = '<option value="">请选择销售机会</option>';
                                data.data.forEach(opportunity => {
                                    const selected = opportunity.id == selectedOpportunityId ? 'selected' : '';
                                    options += `<option value="${opportunity.id}" ${selected}>${opportunity.name}</option>`;
                                });
                                opportunitySelect.innerHTML = options;
                            }
                        });
                });
            }
        });
    </script>
</body>
</html> 